<!--
 * @Descripttion: 核酸宝项目前端
 * @version: 
 * @Author: 杜宇轩
 * @Date: 2022-05-22 05:23:33
 * @LastEditors: 杜宇轩
 * @LastEditTime: 2022-05-22 06:19:49
-->
<template>
  <div>
    <img src="@/assets/background.jpg" class="background">

    <el-form
      ref="loginForm"
      :model="loginForm"
      :rules="loginRules"
      class="login_form"
      autocomplete="on"
      label-position="left"
    >
      <div class="login_header">
        <div class="icon">
          <img src="@/assets/icon.png" class="icon_pic">
          <div class="icon_title">核酸宝</div>
        </div>
      </div>
      <div class="login_box">
        <el-form-item prop="username">
          <el-input
            v-model="loginForm.username"
            prefix-icon="el-icon-user"
            placeholder="手机号/身份证号"
            name="username"
            type="text"
            tabindex="1"
            autocomplete="on"
          />
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model="loginForm.password"
            prefix-icon="el-icon-lock"
            placeholder="密码"
            name="password"
            tabindex="2"
            autocomplete="on"
            show-password
            @keyup.enter.native="handleLogin"
          />
        </el-form-item>
        <el-button
          class="loginButton"
          :loading="loading"
          type="primary"
          @click.native.prevent="handleLogin"
        >
          登录
        </el-button>
        <el-button
          class="registerButton"
          type="primary"
          @click="$router.push('/register')"
        >
          注册
        </el-button>
      </div>
    </el-form>

  </div>
</template>

<script>
import {
  userLoginByPhone,
  userLoginByCardId
} from '@/api/commonUser/userLogin';
export default {
  name: 'Login',
  data() {
    return {
      loginForm: {
        username: '',
        password: ''
      },
      loginRules: {
        username: [{ required: true, message: '请输入手机号/身份证号', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      },
      cur: true,
      loading: false,
      redirect: undefined
    }
  },
  watch: {
    $route: {
      handler: function(route) {
        // 用来处理从其他页面重定向到login
        const query = route.query;
        if (query && query.redirect) {
          this.redirect = query.redirect;
        }
      },
      immediate: true
    }
  },
  methods: {
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true;
          if (this.loginForm.username.length == 11) { // 手机号登录
            const input = {};
            input.phoneNumber = this.loginForm.username;
            input.password = this.loginForm.password;
            userLoginByPhone(input).then((data) => {
              this.loading = false;
              this.$store.commit('commonUser/SET_DATA', {
                username: data.name,
                type: data.type,
                token: {
                  token: data.token,
                  lastTime: new Date().getTime()
                },
                userId: data.userId
              });
              this.$message.success('登录成功');
              if (data.type === 'DOCTOR') {
                this.$router.push('/doctor');
              } else if (this.redirect === undefined) {
                this.$router.push('/');
              } else {
                this.$router.push(this.redirect);
              }
            }).catch(() => {
              this.loading = false;
            });
          } else { // 身份证号登录
            const input = {};
            input.userId = this.loginForm.username;
            input.password = this.loginForm.password;
            userLoginByCardId(input).then((data) => {
              this.loading = false;
              this.$store.commit('commonUser/SET_DATA', {
                username: data.name,
                type: data.type,
                token:{
                  token: data.token,
                  lastTime: new Date().getTime()
                },
                userId: data.userId
              });
              this.$message.success('登录成功');
              if (data.type === 'DOCTOR') {
                this.$router.push('/doctor');
              } else if (this.redirect === undefined) {
                this.$router.push('/');
              } else {
                this.$router.push(this.redirect);
              }
            }).catch(() => {
              this.loading = false;
            });
          }
        } else {
          console.error('error submit!!!');
          return false;
        }
      });
    }
  }
}
</script>

<style lang="scss">
body {
  margin: 0 0 0 0;
}

.background {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: -1;
}

.login_form {
  width: 450px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background-color: rgba(255,255,255,0.9);
  border-radius: 10px;
  box-shadow: 1px 1px 3px 3px rgba(0,0,0,0.2);
}

.login_header {
  font-size: 18px;
  margin: 30px 50px 0px 50px;
  cursor: default;

  .icon {
    display: flex;

    .icon_pic {
      height: 40px;
      width: 40px;
    }

    .icon_title {
      font-size: 30px;
      font-weight: bold;
      color: #FF9000;
      margin: 0px 0px 20px 10px;
    }
  }
}

.login_box {
  padding: 40px 50px;

  .loginButton {
    width: 100%;
    margin: center;
    margin-bottom: 10px;
  }

  .registerButton {
    width: 100%;
    margin: center;
    margin: 10px 0px 10px 0px;
  }
}

</style>

<style lang="scss" scoped>
.el-form-item {
  margin-bottom: 35px;
}
.el-button+.el-button {
  margin: 10px 0px 0px 0px;
}

</style>
